:root {
  --border-color: #666;
}

html, body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-columns: 200px auto;
}

nav {
  border-right: 1px solid var(--border-color);
  padding-top: 20px;
}

nav ul {
  position: fixed;
  margin: 0;
  padding-left: 20px;
}

nav ul li {
  list-style-type: none;
  margin: 8px 0;
}

header {
  font-size: 18px;
  border-bottom: 1px solid var(--border-color);
  padding: 20px 20px;
  grid-column: span 2;
  /* These styles are necessary to show the Github logo when this page is hosted externally. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#github-link {
  display: none;
}

main {
  margin-top: 10px;
}

h2 {
  font-size: 20px;
  background-color: var(--vimium-foreground-color);
  padding: 20px 20px;
}

.command {
  max-width: 900px;
  padding: 1px 10px;
  margin: 10px 0;
  box-sizing: border-box;
}

h3 {
  font-size: 18px;
  margin: 6px 0;
  font-weight: normal;
  display: flex;
  justify-items: space-between;
}

h3 code {
  background-color: rgb(243, 243, 243);
  padding: 4px 6px;
  /* This pushes the key bindings to the right of the container. */
  margin-right: auto;
}

p.desc, p.details {
  margin-left: 1rem;
}

.options {
  margin-left: 1rem;
}

.key {
  font-size: 14px;
}

@media (prefers-color-scheme: dark) {
  h3 code {
    background-color: var(--vimium-foreground-color);
  }
}

/*
 * There are two versions of this page: one served as an extension page, and one generated by the
 * build process and hosted on the vimium.github.io website. The link back to Github is not shown in
 * the version served as an extension page.
 */

.hosted-version #github-link {
  display: block;
}

.hosted-version #github-link img#github {
  width: 40px;
}

@media (prefers-color-scheme: dark) {
  .hosted-version #github-link img#github {
    filter: invert(1);
  }
}
